<template>
	<view class="circle-title">
		<view>
			<view class="circle"></view>
			<view class="title">
				{{ title }}
			</view>
		</view>
		<view class="more" @click="to">
			<view class="text">{{ moreTitle }}</view>
			<wd-icon name="arrow-right"></wd-icon>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		required: true
	},
	moreTitle: {
		type: String,
	}
})
const emit = defineEmits(['more']);
const to = () => {
	emit('more')
}
</script>

<style lang="scss" scoped>
.circle-title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	margin: 40rpx 0 18rpx;
	>view {
		display: flex;
		align-items: center;
		column-gap: 6rpx;
	}

	.circle {
		width: 12rpx;
		height: 12rpx;
		background: $uni-color-primary;
		border-radius: 50%;
	}

	.title {
		font-size: 28rpx;
		color: #131414;
	}

	.more {
		color: #86909C;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.text{
			margin-bottom: 2rpx;
		}
	}
}
</style>